<template>
  <div>
  <div id="checkPlant">
    <el-dialog title="查看植物" :visible.sync="visible" top="0.5rem" :lock-scroll="false" :show-close="false" :close-on-click-modal="false">
      <el-form class="checkPlant" ref="plantForm" :model="plant" label-width="100px">
        <el-col :span="24">
          <el-row>
            <el-col :span="18">
              <el-form-item>
                <div class="avatarlist">
<!--                  <el-upload-->
<!--                      class="avatar-uploader"-->
<!--                      name="img"-->
<!--                      :action="uploadURL"-->
<!--                      :show-file-list="false"-->
<!--                      :on-success="handleAvatarSuccess"-->
<!--                      :before-upload="beforeAvatarUpload">-->
                    <img   v-if="plant.avatar" :src="plant.avatar?plant.avatar:'../../../assets/img/bgImg/plant3.png'" class="avatar" >
<!--                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--                    <div slot="tip" class="el-upload__tip">点击上传植物头像，只能上传jpg/png文件，且不超过1mb</div>-->
<!--                  </el-upload>-->
                </div>
              </el-form-item>
            </el-col >
<!--            <el-col :span="6">-->
<!--              <el-button type="text" icon="el-icon-edit" @click="setDisabled()">点击编辑植物信息-->
<!--              </el-button>-->
<!--            </el-col>-->
          </el-row>
          <el-row>
            <el-form-item label="植物名字:" prop="plantName" >
              <div  style="display:grid;justify-content:start">{{plant.plantName}}</div>
<!--              <el-input v-model="plant.plantName"  placeholder="植物名字" clearable :disabled="isDisabled"/>-->
            </el-form-item></el-row>
          <el-row>
            <el-form-item label="种类："prop="category" label-width="100px">
              <div  style="display:grid;justify-content:start">{{category_str}}</div>
<!--              <el-select v-model="category_str" placeholder="种类" style="width: 100px;right: 200px" :disabled="isDisabled">-->
<!--                <el-option-->
<!--                    v-for="item in plantCategoryList"-->
<!--                    :key="item.plantCategoryId"-->
<!--                    :label="item.plantCategoryName"-->
<!--                    :value="item.plantCategoryId">-->
<!--                </el-option>-->
<!--              </el-select>-->
            </el-form-item></el-row>
          <el-row>
            <el-form-item label="植物状态:" prop="plantStatus" label-width="100px">
              <div  style="display:grid;justify-content:start">{{plant.status}}</div>
              <!--              <el-select v-model="plant.status" placeholder="状态" style="width: 100px;right: 200px" :disabled="isDisabled">-->
<!--                <el-option-->
<!--                    v-for="item in plantStatusList"-->
<!--                    :key="item"-->
<!--                    :label="item"-->
<!--                    :value="item">-->
<!--                </el-option>-->
<!--              </el-select>-->
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="备注：" prop="description">
              <div  style="display:grid;justify-content:start">{{plant.description}}</div>
<!--              <el-input type="textarea" :rows="2" v-model="plant.description" resize="none" maxlength="200" show-word-limit palceholder="备注" :disabled="isDisabled"></el-input>-->
            </el-form-item></el-row>
        </el-col>
        <el-col>
          <el-row style="margin-bottom: 20px" type="flex" justify="end">
            <el-col :span="20">
              <div  style="display:grid;justify-content:end">
<!--                <el-button type="success" icon="el-icon-edit-outline" @click="$refs.writeDiaryDialog.open(plant,null,0)">写日记-->
<!--                </el-button>-->
                <!--              <el-button type="success" icon="el-icon-notebook-1" @click="">查看历史日记-->
                <!--              </el-button>-->

                <a style="margin-left: 4px" :href="'#/CheckMyDiary?pid='+plant.plantId" target="_blank"><el-button type="success" icon="el-icon-notebook-1" >查看日记</el-button></a>
              </div>
            </el-col>
            <el-col :span="4">
              <div  style="display:grid;justify-content:end">
              <el-button type="warning" icon="el-icon-magic-stick" @click="updateLikeCount(plant.plantId)">点赞</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
      <span slot="footer">
<!--        <el-button type="danger" @click="deletePlant(plant)">删除植物</el-button>-->
<!--        <el-button type="primary" @click="submitForm('plantForm')">确定</el-button>-->
        <el-button type="info" @click="resetForm('plantForm')">返回</el-button>
    </span>
    </el-dialog>
  </div>
<!--  <write-diary-dialog ref="writeDiaryDialog" title="植物养成日记"></write-diary-dialog>-->
  </div>
</template>

<script>
import {getPlantCategoryById} from "@/api/plantCategory";
import {getPlantById, updateLikeCount} from "@/api/plant";

export default {
  name: "plantDialog",
  data(){
    return{
      visible:false,
      plant:{
        plantId:'',
        plantName:'',
        categoryId:'',
        avatar:'',
        status:'',
        description:'',
        followerNum:'',
        plantAge:'',
        createBy:'',
        createTime:'',
        updateBy:'',
        updateTime:''
      },
      category_str:'',

    }
  },
  methods:{
    openById(id){
      this.visible=true
      getPlantById(id).then(res=>{
        this.plant=JSON.parse(JSON.stringify(res));
        this.getPlantCategoryStr(this.plant.categoryId)
      })
    },
    open (item) {
      console.log("checkplant!!!")
      this.visible=true
      this.plant.plantId=item.plantId
      this.plant.plantName=item.plantName
      this.plant.status=item.status
      this.plant.avatar=item.avatar
      this.plant.categoryId=item.categoryId
      this.plant.description=item.description
      this.plant.followerNum=item.followerNum
      this.plant.createBy=item.createBy
      this.plant.updateBy=item.updateBy
      this.plant.updateTime=item.updateTime
      //this.getCategoryList()
      this.getPlantCategoryStr(this.plant.categoryId)
      //this.getHistoryDiary(this.plant.plantId)

    },
    getPlantCategoryStr(id){
      getPlantCategoryById(id).then(res =>{
        console.log(res.plantCategoryName)
        this.category_str=res.plantCategoryName
      })

    },
    updateLikeCount(plantId){
      updateLikeCount(plantId).then(res=>{
        this.$message.success('点赞成功！');
        console.log("点赞量更新")
      })
    },
    routeChange(){
      this.getPlantCategoryStr(this.plant.categoryId)
    },
    resetForm (plantForm) {
      this.$nextTick(() => {
        this.$refs.plantForm.clearValidate()
      })
      this.plant = {}
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>